<template>
  <view class="detail">
    <!-- wait待消费的第一个框框 -->
    <view class="first-wait" v-if="status=='待消费'">
      <view class="top">
        <image :src="item.item[0].picture" class="image"></image>
        <view class="title">
          <text>{{item.item[0].name + ' ' + item.item[0].count}}杯 堂食可用</text>
          <text>{{item.item[0].integral}}积分</text>
        </view>
      </view>
      <view class="middle">
        <text>券码 {{item.item[0].code}}</text>
        <text>有效期至{{item.item[0].vaild}}</text>
      </view>
      <view class="bottom">
        <image :src="item.item[0].ercode1"></image>
        <!-- <image src="https://cdn8.axureshop.com/demo/2116044/images/%E8%AE%A2%E5%8D%95/u3187.png"></image> -->
        <!-- <image :src="item.ercode2"></image> -->
      </view>
    </view>
    <view class="first common" v-else>
      <view class="status">
        <image :src="statusDetail[item.status].pic"></image>
        <text class="text1">{{item.status}}</text>
        <view class="text2">
          <text>{{statusDetail[item.status].describe}}</text>
          <text v-if="status=='待支付'">{{paytime}}</text>
        </view>
      </view>
      <view class="delivery" v-if="status=='配送中'">
        <text class="title">配送进度</text>
        <view class="gotomap" @click="gotomap">
          <image
            src="https://cdn8.axureshop.com/demo/2116044/images/%E9%85%8D%E9%80%81%E4%B8%AD%E8%AE%A2%E5%8D%95%E8%AF%A6%E6%83%85/u3457.png">
          </image>
          <view class="text">
            <text>您的商品已经打包完好，正在等待商家配送。</text>
            <text>{{item.time}}</text>
          </view>
          <uni-icons type="forward"></uni-icons>
        </view>
      </view>
      <view class="bottom">
        <view class="button" @click="tap1(item.id)">
          <image :src="statusDetail[item.status].btnimg1"></image>
          <text>{{statusDetail[item.status].button1}}</text>
        </view>
        <view v-if="['待支付','配送中'].includes(status)" class="button " @click="tap2(item.id)">
          <image :src="statusDetail[item.status].btnimg2"></image>
          <text>{{statusDetail[item.status].button2}}</text>
        </view>
      </view>

    </view>

    <view class="second-wait common" v-if="status=='待消费'" @click="gotoShops">
      <view class="text">
        适用门店
      </view>
      <view class="suit">
        共11家
        <uni-icons type="forward"></uni-icons>
      </view>
    </view>
    <view class="second common" v-else>
      <view class="title">
        <view class="text">
          餐品信息
        </view>
      </view>
      <view class="list">
        <view class="item" v-for="item in item.item">
          <image :src="item.picture" class="image"></image>
          <view class="name">
            <text>{{item.name}}</text>
            <text>{{item.peopleNum}}人份 少辣</text>
          </view>
          <view class="sub-name">
            <text>￥{{item.price}}</text>
            <text>× {{item.count}}</text>
          </view>
        </view>
      </view>
      <view class="fee" v-if="item.status=='配送中'">
        <view class="text">
          配送费
        </view>
        <view class="num">
          ￥{{item.feetotal}}
        </view>
      </view>
      <view class="discount">
        <view class="text">
          折扣金额
        </view>
        <view class="num">
          -￥{{item.discount}}
        </view>
      </view>
      <view class="total">
        <view class="total-text">
          合计
        </view>
        <view class="total-num">
          ￥{{item.price}}
        </view>
      </view>
    </view>

    <view class="three common" v-if="status=='待消费'">
      <view class="head">
        兑换须知
      </view>
      <view class="content">
        <text>1.有效期：兑换后当天生效，有效期1个月。</text>
        <text>2.适用：仅限堂食。</text>
        <text>3.本券不与其他优惠叠加使用，不可转让、转售，不可兑换为现金。</text>
        <text>4.本优惠券不可开发票。</text>
      </view>
    </view>
    <view class="three common" v-else>
      <view class="title">
        <view class="text">
          门店信息
        </view>
        <view class="icons">
          <view class="icon" @click="call">
            <image src="https://cdn8.axureshop.com/demo/2116044/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u637.png">
            </image>
          </view>
          <view class="icon" @click="gotoShopmap">
            <image src="https://cdn8.axureshop.com/demo/2116044/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u640.png">
            </image>
          </view>

        </view>
      </view>
      <view class="info">
        <view class="item" v-for="(v,i) in item.shopinfo[0]">
          <view class="name">
            {{i}}
          </view>
          <view class="value">
            {{v}}
          </view>
        </view>
      </view>
    </view>
    <view class="four common">
      <view class="title">
        <view class="text">
          订单信息
        </view>
      </view>
      <view class="info">
        <view class="item" v-for="(v,i) in item.orderinfo[0]">
          <view class="name">
            {{i}}
          </view>
          <view class="value">
            {{v}}
            <text v-if="i=='订单编号'" @click="copy"> 复制</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import http from '../../utils/http.js';
  export default {
    data() {
      return {
        paytime: '14:59',
        status: '',
        statusDetail: {
          '待支付': {
            'pic': 'https://cdn8.axureshop.com/demo/2116044/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u671.svg',
            'describe': '剩余支付时间 ',
            'button1': '立即支付',
            'btnimg1': 'https://cdn8.axureshop.com/demo/2116044/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u669.png',
            'button2': '取消订单',
            'btnimg2': 'https://cdn8.axureshop.com/demo/2116044/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u666.png',
          },
          '制作中': {
            'pic': 'https://cdn8.axureshop.com/demo/2116044/images/%E5%88%B6%E4%BD%9C%E4%B8%AD%E8%AE%A2%E5%8D%95%E8%AF%A6%E6%83%85/u3339.svg',
            'describe': '预计 16:30 左右制作完成 ',
            'button1': '催单',
            'btnimg1': 'https://cdn8.axureshop.com/demo/2116044/images/%E5%88%B6%E4%BD%9C%E4%B8%AD%E8%AE%A2%E5%8D%95%E8%AF%A6%E6%83%85/u3337.png',
          },
          '配送中': {
            'pic': 'https://cdn8.axureshop.com/demo/2116044/images/%E9%85%8D%E9%80%81%E4%B8%AD%E8%AE%A2%E5%8D%95%E8%AF%A6%E6%83%85/u3450.svg',
            'describe': '预计 16:43 之前送达，请耐心等待',
            'button1': '确认收货',
            'btnimg1': 'https://cdn8.axureshop.com/demo/2116044/images/%E9%85%8D%E9%80%81%E4%B8%AD%E8%AE%A2%E5%8D%95%E8%AF%A6%E6%83%85/u3449.png',
            'button2': '再来一单',
            'btnimg2': 'https://cdn8.axureshop.com/demo/2116044/images/%E5%88%B6%E4%BD%9C%E4%B8%AD%E8%AE%A2%E5%8D%95%E8%AF%A6%E6%83%85/u3337.png',
          },
          '已取消': {
            'pic': 'https://cdn8.axureshop.com/demo/2116044/images/%E5%B7%B2%E5%8F%96%E6%B6%88%E8%AE%A2%E5%8D%95%E8%AF%A6%E6%83%85/u3596.svg',
            'describe': '支付超时，订单已取消',
            'button1': '再来一单',
            'btnimg1': 'https://cdn8.axureshop.com/demo/2116044/images/%E5%B7%B2%E5%8F%96%E6%B6%88%E8%AE%A2%E5%8D%95%E8%AF%A6%E6%83%85/u3595.png',
          },
          '已完成': {
            'pic': 'https://cdn8.axureshop.com/demo/2116044/images/%E5%B7%B2%E5%AE%8C%E6%88%90%E8%AE%A2%E5%8D%95%E8%AF%A6%E6%83%85/u3704.svg',
            'describe': '感谢您的购买，期待再次光临',
            'button1': '再来一单',
            'btnimg1': 'https://cdn8.axureshop.com/demo/2116044/images/%E5%B7%B2%E5%8F%96%E6%B6%88%E8%AE%A2%E5%8D%95%E8%AF%A6%E6%83%85/u3595.png',
          },
        },
        item: {}
      }
    },
    methods: {
      gotoShops() {
        //跳转适用门店
      },
      copy() {
        //复制到手机剪贴板
        uni.showToast({
          title: '复制成功',
          icon: 'success'
        });
      },
      gotoShopmap() {
        //跳转地址导航
      },
      call() {

        uni.showModal({
          content: this.item.shopinfo[0]['联系方式'],
          confirmText: '拨打',
          cancelText: '放弃',
          confirmColor: '#F77214',
          success: (res) => {
            if (res.confirm) {
              // console.log('用户点击确定');
              uni.makePhoneCall({
                phoneNumber: this.item.shopinfo[0]['联系方式']
              })
            } else if (res.cancel) {
              console.log('用户点击取消');
            }
          }
        });

      },
      gotomap() {
        uni.navigateTo({
          url: '/pages/deliveryMap/deliveryMap',
          // success: res => {},
          // fail: () => {},
          // complete: () => {}
        });
      },
      tap1(id) {

        switch (this.status) {
          case '待支付':
            uni.navigateTo({
              url: '/pages/checkout/checkout?paymoney=' + this.item.price
            })
            break;
          case '制作中':
            uni.showToast({
              title: '催单成功',
              icon: 'success'
            });
            break;
          case '配送中':
            uni.showModal({
              content: '当前订单正在配送中，确认已收到商品吗？',
              confirmText: '确定',
              cancelText: '放弃',
              confirmColor: '#F77214',
              success: (res) => {
                if (res.confirm) {
                  // console.log('用户点击确定');
                  http({
                    url: `/receiveList`,
                    method: 'post',
                    data: {
                      orderid: id
                    },
                    success: (res) => {
                      if (res.data.msg == '成功') {
                        uni.showToast({
                          title: '已确认收货',
                          icon: 'success'
                        })
                        //返回上一页
                        uni.navigateBack({
                          delta: 2, //返回层数，2则上上页
                        })
                      } else {
                        uni.showToast({
                          title: res.data.msg,
                          icon: 'error'
                        })
                      }
                    }
                  })

                } else if (res.cancel) {
                  console.log('用户点击取消');
                }
              }
            });

            break;
          case '已完成':
          case '已取消':
            uni.setStorageSync('shopid', 1);
            // uni.setStorageSync('number', 1);
            uni.setStorageSync('address', this.item.shopinfo[0]['门店地址']);
            uni.switchTab({
              url: '/pages/Dine-in/Dine-in'
            })
            break;

        }

      },
      tap2(id) { //配送中和待支付才有两个按钮
        switch (this.status) {
          case '配送中':
            uni.setStorageSync('shopid', 1);
            // uni.setStorageSync('number', 1);
            uni.setStorageSync('address', this.item.shopinfo[0]['门店地址']);
            uni.switchTab({
              url: '/pages/Dine-in/Dine-in'
            })
            break;
          case '待支付':
            // console.log(2)
            uni.showModal({
              content: '确定取消该订单吗？',
              confirmText: '确定',
              cancelText: '放弃',
              confirmColor: '#F77214',
              success: function(res) {
                if (res.confirm) {
                  console.log('用户点击确定');
                  http({
                    url: `/cancelList`,
                    method: 'post',
                    data: {
                      orderid: id
                    },
                    success: (res) => {
                      if (res.data.msg == '取消成功') {
                        uni.showToast({
                          title: '取消成功',
                          icon: 'success'
                        })
                        //返回上一页
                        uni.navigateBack({
                          delta: 2, //返回层数，2则上上页
                        })
                      } else {
                        uni.showToast({
                          title: res.data.msg,
                          icon: 'error'
                        })
                      }
                    }
                  })

                } else if (res.cancel) {
                  // console.log('用户点击取消');
                }
              }
            });

            break;
        }

      },
    },
    onLoad(item) {
      this.item = JSON.parse(item.item)
      // console.log(this.item);
      this.status = this.item.status
      // console.log(this.item);
      for (let v in this.item.orderinfo[0]) { //删掉orderinfo里面的null
        if (this.item.orderinfo[0][v] == null || this.item.orderinfo[0][v] == 'null') {
          delete this.item.orderinfo[0][v];
        }
      }
      // 倒计时15分钟
      let time = 900;
      setInterval(() => {
        time = time - 1;
        var minute = parseInt(time / 60);
        var second = parseInt(time % 60);
        this.paytime = minute + ':' + second
        // console.log();
      }, 1000);

    }
  }
</script>

<style lang="scss">
  .detail {
    .common {
      margin: 44rpx 44rpx;
      background-color: white;
      border-radius: 20rpx;
      padding: 30rpx 25rpx;
      display: flex;
      flex-direction: column;
      align-items: center;

      // box-shadow: #bebebe;
      .title {
        width: 100%;
        align-self: flex-start;
        display: flex;
        justify-content: space-between;
        padding-bottom: 30rpx;
        border-bottom: #bebebe50 solid 2rpx;

        .text {
          font-size: 36rpx;
        }

        .icons {
          display: flex;


          .icon {
            width: 48rpx;
            height: 48rpx;
            border-radius: 50%;
            background-color: #fef1e8;
            margin: 0 20rpx;
            display: flex;
            justify-content: center;
            align-items: center;

            image {
              width: 20rpx;
              height: 20rpx;
            }
          }

        }
      }

      .info {
        display: flex;
        flex-direction: column;
        width: 100%;
        padding-top: 20rpx;

        .item {
          display: flex;
          justify-content: space-between;
          margin-bottom: 20rpx;

          .name {
            color: #bebebe;
          }

          .value {
            text {
              margin-left: 10rpx;
              color: #F77214;
            }
          }
        }

      }
    }

    .first-wait {
      // width: 100%;
      background-color: white;
      border-radius: 20rpx;
      padding: 30rpx 25rpx;
      margin: 44rpx 44rpx;

      .top {
        display: flex;
        padding: 30rpx 30rpx;
        align-items: center;

        .image {
          width: 120rpx;
          height: 120rpx;
        }

        .title {
          display: flex;
          flex-direction: column;
          flex: 2;
          margin: 0 15rpx;

          text:nth-child(1) {
            font-size: 35rpx;
            margin-bottom: 10rpx;
          }

          text:nth-child(2) {
            color: #bebebe;
          }
        }
      }

      .middle {
        display: flex;
        flex-direction: column;
        padding: 50rpx 0;
        margin: 20rpx 20rpx;
        border-bottom: #bebebe dashed 2rpx;
        border-top: #bebebe dashed 2rpx;

        text:nth-child(1) {
          font-size: 40rpx;

        }

        text:nth-child(2) {
          color: #bebebe;
          font-size: 28rpx;

        }
      }

      .bottom {
        display: flex;
        justify-content: center;
        align-items: center;


        image {
          width: 250rpx;
          height: 250rpx;
          //  margin-bottom: 30rpx;
        }
      }
    }

    .first {
      display: flex;
      flex-direction: column;
      align-items: center;

      .status {
        display: flex;
        flex-direction: column;
        align-items: center;


        image {
          width: 64rpx;
          height: 64rpx;
          margin: 20rpx 0;
        }

        .text1 {
          font-size: 40rpx;
          margin-bottom: 20rpx;
        }

        .text2 {
          text:nth-child(1) {
            color: #bebebe;
          }

          text:nth-child(2) {
            color: #F77214;
          }

          margin-bottom: 20rpx;
        }
      }

      .delivery {
        padding: 10rpx 10rpx;
        width: 90%;
        border-top: #bebebe50 solid 2rpx;

        .title {
          font-size: 34rpx;
          margin-top: 10rpx;
        }

        .gotomap {
          display: flex;
          align-items: center;
          margin: 20rpx 0;

          image {
            width: 30rpx;
            height: 30rpx;
          }

          .text {
            margin-left: 10rpx;
            font-size: 26rpx;

            text:nth-child(2) {
              color: #bebebe;
            }
          }
        }
      }

      .bottom {
        width: 80%;
        border-top: #bebebe50 solid 2rpx;
        display: flex;
        justify-content: center;
        padding-top: 20rpx;


        .button {
          display: flex;
          align-items: center;
          margin: 0 20rpx;

          image {
            width: 32rpx;
            height: 32rpx;
            margin: 0 20rpx;
          }
        }
      }
    }

    .second {
      .list {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 30rpx 20rpx;

        .item {
          width: 100%;
          display: flex;
          align-items: center;

          padding-bottom: 10rpx;
          border-bottom: solid 2rpx #bebebe50;

          .image {
            width: 120rpx;
            height: 120rpx;
          }

          .name {
            display: flex;
            flex-direction: column;
            margin: 20rpx 20rpx;
            flex: 2;

            text:nth-child(1) {
              font-size: 28rpx;
              margin-bottom: 25rpx;
            }

            text:nth-child(2) {
              font-size: 26rpx;
              color: #bebebe;
            }
          }

          .sub-name {
            display: flex;
            flex-direction: column;

            text:nth-child(2) {
              align-self: flex-end;
              margin-top: 25rpx;
              color: #bebebe;
            }
          }
        }

      }

      .discount {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-self: flex-start;
        padding-bottom: 20rpx;
        border-bottom: solid 2rpx #bebebe50;

        .text {
          color: #bebebe;
        }
      }

      .fee {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-self: flex-start;
        padding-bottom: 20rpx;
        // border-bottom: solid 2rpx #bebebe50;

        .text {
          color: #bebebe;
        }
      }

      .total {
        align-self: flex-end;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        margin-top: 20rpx;

        .total-text {
          color: #bebebe;
        }

        .total-num {
          font-size: 36rpx;
        }
      }
    }

    .second-wait {
      display: flex;
      flex-direction: row;
      justify-content: space-between;

      .text {
        color: #bebebe;
      }

      .suit {
        color: #F77214;
      }
    }

    .three {
      align-items: flex-start;

      .head {
        font-size: 35rpx;
        margin-bottom: 10rpx;
      }

      .content {
        display: flex;
        flex-direction: column;

        text {
          margin-bottom: 10rpx;
          color: #bebebe;
        }

      }
    }
  }
</style>
